<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file">
  <img src="" alt="">
  <!-- 不经过服务器渲染图像的本地预览  URL.createObjectURL()  blob数据格式-->
  <script>
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    // 1. 选择完文件后会触发file文件域的change事件
    ipt.addEventListener('change',function(e){
     console.log(e.target.files[0]); // 2. 获取上传的文件对象
    // 3. 生成url地址 这个url地址是临时地址, 只要创建这个地址的页面关闭这个地址也会随之失效
    const url = URL.createObjectURL(e.target.files[0])
    console.log(url);
    // 4. 将url地址赋值给img标签的src
    img.src = url
    })
  </script>
</body>
</html>